<template>
	
	<view class="information-update">
		 <navigator class="back-arrow" open-type="navigateBack">
		      <view class="arrow"></view>
		  </navigator> 
	    <text class="title">信息修改</text>
	</view>
	
	<view class="register-container">
	    
	    <!-- 输入框区域 -->
	    <view class="input-section">
	      
		 
	      <!-- 手机号输入 -->
	      <view class="input-wrapper">
			 <image class="input-icon" src="https://bpic.51yuansu.com/pic2/cover/00/32/33/5810ea653456c_610.jpg?x-oss-process=image/resize,h_360,m_lfit/sharpen,100"></image>
	        <input class="search-input" type="text" placeholder="请输入手机号" />
	      </view>
	      
	      <!-- 验证码输入 -->
	      <view class="input-wrapper code-section">
			  <!-- 验证码图标 -->
			 <image class="input-icon" src="https://bpic.51yuansu.com/pic3/cover/01/56/80/594c97b265802_610.jpg?x-oss-process=image/resize,w_260/sharpen,100"></image>
	        <input class="search-input" type="text" placeholder="请输入验证码" />
	        <text class="get-code">获取验证码</text>
	      </view>
	
	    </view>
	    
	    <!-- 按钮区域 -->
	    <view class="btn-section">
	      <button form-type="submit" bind:tap="enterRegisterNext">提交</button>
	    </view>
	
	  </view>
	
	
</template>

<script setup>
	
</script>

<style>
	
	
	       
		   .information-update {
		     display: flex;
		     justify-content: center;
		     align-items: center; /* 调整对齐方式，让内容靠近顶部 */
		     height: 10vh;
		     background-color: #F8F8F8;
			 position: fixed; /* 固定在顶部 */
			 z-index: 1000; /* 确保在其他内容上方 */
			 top: 0;
			 left: 0;
			 width: 100%;
		   }
		   
		   .back-arrow {
		     position: relative;
		     display: flex;
		     align-items: center;
		     justify-content: center;
		     cursor: pointer;
		     left: -250rpx;
		   }
		   
		   .arrow {
		     width: 20rpx;
		     height: 20rpx;
		     border-top: 4rpx solid black;
		     border-right: 4rpx solid black;
		     transform: rotate(-135deg);
		     margin-top: 2vh;
		   }
		   
		   .title {
		     font-size: 40rpx;
		     font-weight: normal;
		     color: black;
		     margin-top: 2vh /* 向上移动标题，减少底部空间 */
		   }
		   
		   
		   /* 详情 */
		   /* 容器整体背景 */
		  .register-container {
		     background-color: white;
		     border-top: 1px solid lightgray;
		     padding: 20rpx 60rpx 20rpx 20rpx;
			 margin-top: 10vh; /* 让内容从头部下方开始 */
		   }
		   
		 
		   
		   /* 输入框外部包裹 */
		   .input-section {
		     background-color: white;
		   }
		   
		   /* 输入框容器 */
		   .input-wrapper {
			 display: flex; /* 让图标和输入框并排 */
			 align-items: center; /* 垂直居中对齐 */
		     background-color: white;
		     padding-left: 38rpx;
		     position: relative;
		    /* border-bottom: 1px solid lightgray; */
		   }
		   
		 /* 输入框前的图标 */
		 .input-icon {
		   width: 40rpx;  /* 控制图标大小 */
		   height: 40rpx;
		   margin-right: 16rpx; /* 控制图标和输入框的间距 */
		 }
		   
		   /* 统一输入框样式 */
		  .search-input {
		    height: 50px;
		    width: 100%;
		    padding: 0; /* 取消 padding */
		    font-size: 16px;
		    letter-spacing: 1px;
		    color: #888888;
		    border: none; /* 去掉边框，防止边框影响 */
		    outline: none; /* 取消聚焦时的边框 */
			 border-bottom: 1px solid lightgray; /* 只给输入框加底部横线 */
		  }

		   
		   /* 验证码区域 */
		   .code-section {
		     position: relative;
		   }
		   
		   /* 获取验证码 */
		   .get-code {
		     position: absolute;
		     right: 30rpx;
		     top: 50%;
		     transform: translateY(-50%);
		     font-size: 16px;
		     color: #1D6FFF;
		     letter-spacing: 1px;
		   }
		   
		   /* 按钮区域 */
		   .btn-section {
		     margin-top: 100rpx;
		     display: flex;
		     justify-content: center;
		   }
		   
		   /* 按钮样式 */
		   .btn-section button {
		     width: 510rpx;
		     height: 72rpx;
		     background-color: #1D6FFF;
		     color: white;
		     font-size: 14px;
		     border-radius: 8rpx;
		   }
		 
		   
</style>
